<style>
body{text-align:center;background:black;}	
</style>
<meta name="Content-Type" content="text/html;charset=utf-8">
<video width="800" id="player" height="600" controls poster=https://www.deepin.org/wp-content/uploads/2017/09/pc_banner_cn_desk.jpg loop=loop></video>
<script>
var video = document.getElementById("player");
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("GET", "water.mp4", true);
xhr.responseType = "blob";
xhr.onload = function() {
	if (this.status == 200) {
		var blob = this.response;
		video.onload = function(e) {
			window.URL.revokeObjectURL(video.src);
		};
		video.src = window.URL.createObjectURL(blob);
	}
}
xhr.send();
</script>